<template>
	<view class="content-class" :style="{ paddingTop: statusBarHeight + 'px' }">
		<u-navbar leftIconColor="#fff" bgColor="#1B1B1B" title="睡眠" :autoBack="true"> </u-navbar>
		<u-tabs :activeStyle="{
		            color: '#0B0F12',
					background: 'linear-gradient( 90deg, #FFD8BB 0%, #F0986A 100%)',
					borderRadius: '16px',
					fontSize:'12px',
					whiteSpace: 'nowrap',
		        }" :inactiveStyle="{
		            color: '#fff',
					fontSize:'12px',
					whiteSpace: 'nowrap'
		        }" :list="tabList" @click="tabClick" :current="activeIndex"></u-tabs>
		<sleepCard :sleepData="cardData" :statusBarHeight="statusBarHeight"></sleepCard>
		<view v-if="activeIndex == 0">
			<day></day>
		</view>
		<view v-if="activeIndex == 1">
			<week></week>
		</view>
		<view v-if="activeIndex == 2">
			<month></month>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import sleepCard from './components/sleep-card.vue';
	import day from './Day.vue';
	import week from './Week.vue';
	import month from './Month.vue';
	export default {
		data() {
			return {
				activeIndex: 0,
				cardData: {},
				tabList: [{
					name: '日',
				}, {
					name: '周',
				}, {
					name: '月'
				}, {
					name: '6个月'
				}],
			}
		},
		computed: {
			...mapGetters(["statusBarHeight"]),
		},
		components: {
			sleepCard,
			day,
			week,
			month
		},
		onLoad() {
			this.tabClick({
				index: this.activeIndex
			})

		},
		methods: {
			tabClick(e) {
				this.activeIndex = e.index
				if (e.index == 0) {
					this.cardData = {
						title: '睡眠分数',
						status: '良好',
						value: 4,
						score: '76',
						date: '2025-02-12',
						desc: '在深度睡眠期间，身体会进行重要的生理恢复，如身体所有生理模式的恢复。从细胞再生、免疫力增强到肌肉修复。此外，在深度睡眠期间，身体会分泌促进生长和发育的重要荷尔蒙这对于对免疫系统和肌肉要求很高的人来说尤其有用。'
					}
				} else if (e.index == 1) {
					this.cardData = {
						title: '平均周睡眠分数',
						status: '良好',
						value: 4,
						score: '76',
						date: '2025-02-12至2025-02-18'
					}
				} else if (e.index == 2) {
					this.cardData = {
						title: '平均月睡眠分数',
						status: '良好',
						value: 4,
						score: '86',
						date: '2025-02-12至2025-03-12'
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-class {
		padding-left: 16px;
		padding-right: 16px;

		.u-tabs {
			background-color: #1B1B1B;
			border-radius: 16px;
			margin: 20px 0px;

			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1;
				padding: 0px;

				height: 32px !important;

				.u-tabs__wrapper__nav__item__text {
					height: 100%;
					display: inline-flex;
					align-items: center;
					width: 100%;
					justify-content: center;
				}
			}

			::v-deep .u-tabs__wrapper__nav__line {
				display: none
			}
		}
	}
</style>